<template>
  <nav class="bg-white/70 backdrop-blur-md border-b border-gray-100 sticky top-0 z-50">
    <div class="w-full max-w-[98%] mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex">
          <div class="flex-shrink-0 flex items-center">
            <router-link to="/" class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600">
              ZiYue
            </router-link>
          </div>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:items-center gap-3">
          <!-- 未登录状态 -->
          <template v-if="!authStore.isLoggedIn">
            <router-link to="/login" class="text-sm text-indigo-600 hover:text-indigo-500 transition-colors">登录</router-link>
            <router-link to="/register" class="text-sm px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition-colors">注册</router-link>
          </template>
          <!-- 已登录状态 -->
          <template v-else>
            <span class="text-sm font-medium text-indigo-600">{{ authStore.user.username }}</span>
            <div class="flex items-center space-x-2">
              <router-link
                v-if="showDashboard"
                to="/dashboard"
                class="inline-flex items-center px-3 py-1.5 text-sm text-indigo-600 bg-white/10 backdrop-blur-sm
                       border border-indigo-100 rounded-lg hover:bg-indigo-50 hover:border-indigo-200
                       transition-colors duration-200"
              >
                <DashboardIcon className="h-4 w-4 mr-1.5" />
                仪表盘
              </router-link>
              <button
                @click="handleLogout"
                class="inline-flex items-center px-3 py-1.5 text-sm text-red-600 bg-white/10 backdrop-blur-sm
                       border border-red-100 rounded-lg hover:bg-red-50 hover:border-red-200
                       transition-colors duration-200"
              >
                <LogoutIcon class="h-4 w-4 mr-1.5" />
                退出登录
              </button>
            </div>
          </template>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import LogoutIcon from './icons/LogoutIcon.vue'
import DashboardIcon from './icons/DashboardIcon.vue'

const props = defineProps({
  showDashboard: {
    type: Boolean,
    default: true
  }
})

const router = useRouter()
const authStore = useAuthStore()

const handleLogout = async () => {
  await authStore.logout()
  router.push('/login')
}
</script> 